<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h2>一、是什么</h2>
    <div>AJAX全称(Async Javascript and XML)</div>
    <br>
    <div>即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页</div>
    <br>
    <div>Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面</div>
    <br>
    <div>浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作（异步）</div>

    <h2>二、实现过程</h2>
    <div>实现 Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：</div>
    <ul>
      <li>创建 Ajax的核心对象 XMLHttpRequest对象</li>
      <li>通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接</li>
      <li>构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端</li>
      <li>通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态</li>
      <li>接受并处理服务端向客户端响应的数据结果</li>
      <li>将处理结果更新到 HTML页面中</li>
    </ul>
  </div>
  <script>
    // 1.0
    // 创建XMLHttpRequest对象
    // const xhr = new XMLHttpRequest();

    // 2.0
    // 通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接
    // xhr.open(method, url, [async][, user][, password])
    // method：表示当前的请求方式，常见的有GET、POST
    // url：服务端地址
    // async：布尔值，表示是否异步执行操作，默认为true
    // user: 可选的用户名用于认证用途；默认为`null
    // password: 可选的密码用于认证用途，默认为`null

    // 3.0
    // 给服务端发送数据
    // 通过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端
    // xhr.send([body])
    // body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null
    // 如果使用get发送数据，会拼接在url地址栏中，有长度限制

    // 4.0
    // 绑定onreadystatechange事件
    // onreadystatechange 事件用于监听服务器端的通信状态，主要监听的属性为XMLHttpRequest.readyState,
    // readyState有五个状态，属性值一变化就会触发readystatechange 事件

    // 5.0
    // XMLHttpRequest.responseText属性用于接收服务器端的响应结果
  </script>


  <!-- <script>
    // 例子
    const request = new XMLHttpRequest()
    request.onreadystatechange = function (e) {
      if (request.readyState === 4) { // 整个请求过程完毕
        if (request.status >= 200 && request.status <= 300) {
          console.log(request.responseText) // 服务端返回的结果
        } else if (request.status >= 400) {
          console.log("错误信息：" + request.status)
        }
      }
    }
    request.open('POST', 'http://xxxx')
    request.send()
  </script> -->

  <script>
    // 三、封装
    //封装一个ajax请求
    function ajax(options) {
      //创建XMLHttpRequest对象
      const xhr = new XMLHttpRequest()


      //初始化参数的内容
      options = options || {}
      options.type = (options.type || 'GET').toUpperCase()
      options.dataType = options.dataType || 'json'
      const params = options.data

      //发送请求
      if (options.type === 'GET') {
        xhr.open('GET', options.url + '?' + params, true)
        xhr.send(null)
      } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)

        //接收请求
        xhr.onreadystatechange = function () {
          // 0	请求还未初始化。
          // 1	请求已经建立。
          // 2	请求已经发送。
          // 3	请求正在处理。
          // 4	请求已经完成。
          if (xhr.readyState === 4) {
            let status = xhr.status
            if (status >= 200 && status < 300) {
              options.success && options.success(xhr.responseText, xhr.responseXML)
            } else {
              options.fail && options.fail(status)
            }
          }
        }
      }
    }


    // 调用
    // ajax({
    //   type: 'post',
    //   dataType: 'json',
    //   data: {},
    //   url: 'https://xxxx',
    //   success: function (text, xml) {//请求成功后的回调函数
    //     console.log(text)
    //   },
    //   fail: function (status) {////请求失败后的回调函数
    //     console.log(status)
    //   }
    // })

    ajax({
      type: 'post',
      dataType: 'json',
      data: {
        "model":"ShzzGetZsgyManager","method":"syrsDetail","execAjax":true,"xzqh":"330225","startdate":"2023-01","enddate":"2023-02"
      },
      url: 'https://shzz.mzt.zj.gov.cn/st_shzz/pub/ajaxMgrEngine.as',
      success: function (text, xml) {//请求成功后的回调函数
        console.log(text,xml)
      },
      fail: function (status) {////请求失败后的回调函数
        console.log(status)
      }
    })

  </script>
</body>

</html>